<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin: 0;padding: 0}
        .box {
            width: 520px;
            height: 520px;
            position: relative;
            float: left;
        }
        .box div {
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: white;
            position: absolute;
            /*背影图片url写到css中 不要在js中style里指定*/
            background-image: url("img/qumo.jpg");
            /*在css中指定所有小div的背影的尺寸为相同的我们想指定的某个尺寸，这样就不受图片尺寸的限制了。*/
            background-size: 500px 500px;
        }
    </style>
</head>
<body>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <script>
        oBox1 = document.querySelector('#box1');
        oBox2 = document.querySelector('#box2');
        let str1 = '';
        let str2 = '';

        //两个循环做法：横向循环+纵向循环
        for(var j=0;j<10;j++){
            for(var i=0;i<10;i++){
                str1 += `<div style="left:${i*51}px;top:${j*51}px;
                        background-position: -${i*50}px -${j*50}px">${i+1}
                        </div>`
            }
        }
        oBox1.innerHTML = str1;

        //一次循环：使用%取模运算
        for(var i=0;i<100;i++){
            // %取模运算 求余数
            // 2%5 = 2  2除以5商0余2  n%5的结果总是：0 1 2 3 4
            //任意数 %n 的结果为0到n-1
            //left值为每10递增后重新从0开始，也就是%10 结果为0 1 2 3 4 5 6 7 8 9 然后第10个变为0 11为1
            //top值直接除以10得到十分位用parseInt取整，将小数舍弃。
            //left值和top值都乘以小div的宽度50px多1px，这样两个小div之前就会留出1px的间隙。
            //background的top值和left值同理 这里不需要多1px的间隙，直接乘以50px即可。
            str2 += `<div style="left:${i%10*51}px;top:${parseInt(i/10)*51}px;
                    background-position: -${i%10*50}px -${parseInt(i/10)*50}px">${i+1}
                    </div>`
        }
        oBox2.innerHTML = str2;
    </script>
</body>
</html>